<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select placeholder="请选择一级分类" v-model="oneCategoryId">
          <el-option v-for="item in categoryOneList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择二级分类" v-model="twoCategoryId">
          <el-option v-for="item in categoryTwoList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择三级分类" v-model="threeCategoryId">
          <el-option v-for="item in categoryThreeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin:10px 0">
    <el-button type="primary" size="default" icon="Plus" :disabled="!threeCategoryId">添加SPU
    </el-button>
    <el-table border style="margin: 10px 0">
      <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
      <el-table-column label="SPU名称" width="120" align="center">

      </el-table-column>
      <el-table-column label="SPU描述" align="center">
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template>
          <el-button type="text" icon="Plus"></el-button>
          <el-button type="text" icon="Edit"></el-button>
          <el-button type="text" icon="Grid"></el-button>
          <el-popconfirm :title="`确定删除${row.attrName}吗？`" width="200px" icon="Delete">
            <template #reference>
              <el-button icon="Delete" type="text" style="color: red"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, prev, pager, next, ->, jumper, total"
        :total="total"
    />
  </el-card>
</template>


<script setup lang="ts">


import {ref} from "vue";

let categoryOneList = ref<any>([]);
let categoryTwoList = ref<any>([]);
let categoryThreeList = ref<any>([]);

let oneCategoryId = ref<number | string>('');
let twoCategoryId = ref<number | string>('');
let threeCategoryId = ref<number | string>('');

let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let total = ref<number>(0);

</script>


<style scoped>

</style>